<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="8">
          <NewCard title="问题列表">
            <template>
              <div class="leftTable">
                <div class="leftSearch">
                  <el-popover placement="bottom" width="160">
                    <el-input
                      v-model="searchlist"
                      size="mini"
                      clearable
                      placeholder="输入关键字搜索"
                    />
                    <el-button
                      slot="reference"
                      icon="el-icon-search"
                      circle
                    ></el-button>
                  </el-popover>
                </div>

                <el-table
                  :data="
                    waitingList.filter(
                      (data) =>
                        !searchlist ||
                        data.title
                          .toLowerCase()
                          .includes(searchlist.toLowerCase())
                    )
                  "
                  :default-sort="{ prop: 'remaTime', order: 'ascending' }"
                  :highlight-current-row="highlight"
                  :height="tableHeight"
                  @row-click="onRowClick"
                  style="width: 100%"
                  ref="probTable"
                >
                  <el-table-column label="标题" width="70%" prop="title">
                  </el-table-column>
                  <el-table-column
                    label="剩余时间"
                    width="30%"
                    prop="remaTime"
                    sortable
                  >
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </NewCard>
        </el-col>
        <el-col :span="8">
          <NewCard title="订单详情">
            <div class="lineItem">
              <div class="replyCount">
                回复剩余时间：<i>{{
                  `${timesRem.h}:${timesRem.m}:${timesRem.s}`
                }}</i>
              </div>
              <h2 class="el-icon-menu">{{ selectRow.title }}</h2>
              <span class="el-icon-time"> {{ selectRow.remaTime }}</span>
              <div class="accessory">
                <p class="el-icon-picture">12月工资明细.jpg</p>
                <p class="el-icon-s-order">12月工资明细.pdf</p>
              </div>
              <div class="lItemContent el-icon-chat-line-square">
                用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问
              </div>
              <div class="lItemContent el-icon-chat-line-square">
                用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="8" :class="{ byTwoThirds: byTwoThirdsClass }">
          <NewCard title="正式回复">
            <div class="formalReply">
              <!-- 宽度扩大至3/2 -->
              <i
                class="expWidth"
                :class="[
                  { 'el-icon-arrow-left': isLeft },
                  { 'el-icon-arrow-right': isRight },
                ]"
                @click="clickbyTwoThirds"
              ></i>

              <!-- <WangEditor ref="wangEditor" :list="[]"></WangEditor> -->
              <Editor style="height: 100%"></Editor>

              <div class="queryBtn">
                <el-button type="primary">提交</el-button>
                <el-button type="primary">提交并继续</el-button>
              </div>

              <div class="otherBtn">
                <el-button type="primary" @click="queryLibrary = true"
                  >查智库</el-button
                >
                <el-button type="primary" @click="queryLaw = true"
                  >查法条</el-button
                >
                <el-button type="primary" @click="calendarBtn = true"
                  >日历</el-button
                >
                <el-button type="primary" @click="statisticsBtn = true"
                  >统计</el-button
                >

                <!-- 查智库 -->
                <Comdrawer
                  size="95%"
                  title="查智库"
                  @eventColse="handleClose"
                  :drawer="queryLibrary"
                >
                  <div class="drawerMain">
                    <el-row :gutter="20">
                      <el-col :span="10">
                        <div class="dracon">
                          <!-- <h1 class="el-icon-zoom-in">查询列表</h1> -->
                          <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="queryLibraryValue"
                            resize="none"
                            maxlength="64"
                            show-word-limit
                            prefix-icon="el-icon-search"
                            clearable
                          >
                          </el-input>
                          <div class="dracon_search">
                            <p>
                              已输入{{
                                queryLibraryValue.length
                              }}个字，还能输入{{
                                64 - queryLibraryValue.length
                              }}个字
                            </p>
                            <el-button type="primary" round>搜索</el-button>
                          </div>
                          <div class="content_search">
                            <h4>点击搜索</h4>
                            <el-tag
                              :key="tag"
                              v-for="tag in hotLabel"
                              :disable-transitions="false"
                              effect="dark"
                            >
                              {{ tag }}
                            </el-tag>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="14">
                        <div class="dracon">
                          <div class="draconTitle">
                            <h1 class="el-icon-document">详情</h1>
                            <!-- <el-button class="el-icon-document-copy"> 复制</el-button> -->
                          </div>
                          <div class="queryLibDetail">
                            <h3>
                              <i class="qlyl">A</i> 我国现行税收法律体系有哪些？
                            </h3>
                            <p>
                              我国现行税法体系由税收实体法和税收征收管理法律制度构成。由19个税收法律、法规组成，它们按性质作用分五类。我国现行税法体系由税收实体法和税收征收管理法律制度构成。由19个税收法律、法规组成，它们按性质作用分五类。
                            </p>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </Comdrawer>

                <!-- 查法条 -->
                <Comdrawer
                  size="70%"
                  title="查法条"
                  @eventColse="queryLawClose"
                  :drawer="queryLaw"
                >
                  <div class="drawerMain">
                    <ComGetLaw></ComGetLaw>
                  </div>
                </Comdrawer>

                <!-- 日历 -->
                <Comdrawer
                  size="60%"
                  title="日历"
                  @eventColse="calendarClose"
                  :drawer="calendarBtn"
                >
                  <div class="drawerMain">
                    <div class="index-calendar">
                      <el-calendar v-model="value">
                        <template slot="dateCell" slot-scope="{ date, data }">
                          <p
                            :class="estState(date)"
                            @click="clickCale(date)"
                            @dblclick="dbHoli($event)"
                          >
                            <!-- {{ data.day.split('-').slice(2).join('-') }} -->
                            {{ getDay(date) }}
                          </p>
                        </template>
                      </el-calendar>
                    </div>
                    <div class="rlExplain">
                      <p><i class="blueCircle"></i>蓝色代表可派工(单击)</p>
                      <p><i class="redCircle"></i>红色代表请假(双击)</p>
                      <p><i class="grayCircle"></i>灰色代表周末</p>
                    </div>
                  </div>
                </Comdrawer>

                <!-- 统计 -->
                <Comdrawer
                  size="60%"
                  title="统计"
                  @eventColse="statisticsClose"
                  :drawer="statisticsBtn"
                >
                  <div class="drawerMain">
                    <div class="drawerState">
                      <el-table
                        :data="statisticsTable"
                        stripe
                        style="width: 100%"
                      >
                        <el-table-column prop="date" label="日期" width="150">
                        </el-table-column>
                        <el-table-column prop="title" label="标题">
                        </el-table-column>
                        <el-table-column prop="state" label="状态">
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </Comdrawer>
              </div>
            </div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import Comdrawer from "../../../components/Comdrawer.vue";
import WangEditor from "../../../components/wangEditor.vue";
import ComGetLaw from "../../../components/ComGetLaw.vue";
export default {
  name: "consulting",
  components: { NewCard, Comdrawer, WangEditor, ComGetLaw },
  data() {
    return {
      value: new Date(),
      //待回复列表 搜索值
      filterText: "",
      //待回复列表 数据
      waitingList: [
        {
          index: 1,
          title: "我国现行税收法律体系有哪些？",
          remaTime: "09:30",
          content: "我国现行税收法律体系有哪些？",
        },
        {
          index: 2,
          title: "拖欠工资怎么办？",
          remaTime: "07:40",
          content: "拖欠工资怎么办？",
        },
        {
          index: 3,
          title: "财务总监最核心的素质要求是什么？",
          remaTime: "02:10",
          content: "财务总监最核心的素质要求是什么？",
        },
        {
          index: 4,
          title: "占A股不到1%银行业占全部上市公司净利润约40%暴实体经济最大软肋",
          remaTime: "11:55",
          content:
            "占A股不到1%银行业占全部上市公司净利润约40%暴实体经济最大软肋",
        },
      ],
      //待回复列表 当前选择的数据
      selectRow: {},

      //待回复列表 搜索
      searchlist: "",
      //待回复列表 高亮
      highlight: true,
      //待回复列表 自适应表格高度
      tableHeight: 0,

      //中间回复倒计时
      timesRem: {
        timer: null,
        count: "",
        h: "02",
        m: "00",
        s: "00",
      },

      //正式回复
      formalReply: {},

      //正式回复 大纲的选中值
      outlineValue: "",

      //日历按钮
      calendarBtn: false,
      //统计按钮
      statisticsBtn: false,

      //查智库右侧抽屉是否显示
      queryLibrary: false,
      //查法条右侧抽屉是否显示
      queryLaw: false,
      //查智库输入内容
      queryLibraryValue: "税收",
      //查法条输入内容
      queryLawValue: "",
      //点击搜索标签
      hotLabel: [
        "劳务纠纷",
        "税务筹划",
        "房地产开发",
        "城市更新",
        "一带一路",
        "一带一路1",
        "劳务派遣",
        "劳务纠纷1",
      ],

      //日历激活状态
      stateCalendar: 1, //1蓝色 或者 不选中 2红色休假 红色底白字 3灰色底
      holiday: false, //是否休假

      //扩大三分之二的类名显示隐藏
      byTwoThirdsClass: false,
      //扩大向左图标显示隐藏
      isLeft: true,
      //扩大向右图标显示隐藏
      isRight: false,

      //统计的表格
      statisticsTable: [
        {
          index: 1,
          date: "2022-04-15",
          title: "我国现行税收法律体系有哪些？",
          state: "已回复",
        },
        {
          index: 2,
          date: "2022-04-16",
          title: "我国现行税收法律体系有哪些？",
          state: "已回复",
        },
        {
          index: 3,
          date: "2022-04-17",
          title: "我国现行税收法律体系有哪些？",
          state: "已过期",
        },
        {
          index: 4,
          date: "2022-04-18",
          title: "我国现行税收法律体系有哪些？",
          state: "已回复",
        },
        {
          index: 5,
          date: "2022-04-19",
          title: "我国现行税收法律体系有哪些？",
          state: "已过期",
        },
      ],
    };
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.myOnresize);
  },

  mounted() {
    this.getConsultTypeListFn();
    //table固定表头，在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 130;
      // 监听窗口大小变化

      window.addEventListener("resize", this.myOnresize);
      // this.tableHeight =
      //   window.innerHeight - this.$refs.table.$el.offsetTop - 130;
      // // 监听窗口大小变化
      // let self = this;

      // window.onresize = function () {5
      //   // console.log(self);
      //   self.tableHeight =
      //     window.innerHeight - self.$refs.table.$el.offsetTop - 130;
      // };
    });
  },
  created() {
    this.countTime(); //定时器
    this.setCurrent(); //左边默认选中第一行
  },
  methods: {
    myOnresize() {
      const self = this;
      self.tableHeight =
        window.innerHeight - self.$refs.table.$el.offsetTop - 130;
    },
    //左边默认选中表格数据的第一行
    setCurrent() {
      this.$nextTick(() => {
        this.$refs.probTable.setCurrentRow(this.waitingList[0]);
        this.selectRow = this.waitingList[0];
      });
    },
    onRowClick(row) {
      this.selectRow = row;
      console.log(this.selectRow);
    },

    //查智库 显示隐藏
    handleClose() {
      this.queryLibrary = false;
    },
    //查法条 显示隐藏
    queryLawClose() {
      this.queryLaw = false;
    },
    //日历 显示隐藏
    calendarClose() {
      this.calendarBtn = false;
    },
    //统计 显示隐藏
    statisticsClose() {
      this.statisticsBtn = false;
    },

    //中间倒计时
    countTime() {
      //定义两个小时的秒数，此处根据需要进行定义
      const time = 7200;
      if (!this.timesRem.timer) {
        this.timesRem.count = time;
        this.timesRem.timer = setInterval(() => {
          if (this.timesRem.count > 0 && this.timesRem.count <= time) {
            this.timesRem.count--;
            const h = parseInt(this.timesRem.count / (60 * 60));
            const m = parseInt((this.timesRem.count / 60) % 60);
            const s = parseInt(this.timesRem.count % 60);
            if (
              this.timesRem.h === 0 &&
              this.timesRem.m === 0 &&
              this.timesRem.s === 0
            ) {
              this.$message({
                message: "回复时间已到!",
                type: "warning",
              });
            } else {
              this.timesRem.h = h > 9 ? h : "0" + h;
              this.timesRem.m = m > 9 ? m : "0" + m;
              this.timesRem.s = s > 9 ? s : "0" + s;
            }
          } else {
            clearInterval(this.timesRem.timer);
            this.timesRem.timer = null;
          }
        }, 1000);
      }
    },
    //倒计时 end

    //日历 标注今天日期
    getDay(data) {
      return data.getDate();
    },
    //日历 初始化周末为灰色底 是否休假
    estState(date) {
      // console.log(date.getDay());
      if (date.getDay() === 6 || date.getDay() === 0) {
        // console.log('bg-week');
        return "bg-week";
      }
      if (this.holiday === true) {
        return "bg-holiday";
      }
    },
    //日历 单击日历选中状态
    clickCale(date) {
      if (date.getDay() === 6 || date.getDay() === 0) {
        this.stateCalendar === 1;
      }
    },
    //日历 双击日历改为休假状态
    dbHoli(e) {
      e.target.classList.toggle("bg-holiday");
      console.log(e.target.classList);
    },

    //右侧扩大宽度
    clickbyTwoThirds() {
      this.byTwoThirdsClass = !this.byTwoThirdsClass;
      this.isLeft = !this.isLeft;
      this.isRight = !this.isRight;
    },
  },
};
</script>

<style scoped>
.label-box-content {
  height: 100%;
}
.label-box-content >>> .top::after {
  height: 1px;
}
.el-row {
  height: 100%;
}
.el-card {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body {
  height: 100%;
}
.el-card >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.el-card >>> .top h1 {
  margin: 20px 0 15px 0;
}
/* 左侧待回复列表 */
.el-card__body {
}
.el-table >>> .el-table__empty-block {
  width: 100% !important;
}
.el-table >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
}
.el-table >>> tr {
  border-radius: 4px;
  overflow: hidden;
  margin: 5px 0;
}
.leftTable .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.el-table >>> table {
  width: 100% !important;
  table-layout: fixed !important;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #1890ff;
  color: #fff;
}
.el-table >>> .el-table__header-wrapper {
  margin: 6px 0;
}
.el-table >>> .el-table__header-wrapper th,
.el-table >>> .el-table__fixed-header-wrapper th {
  background-color: #f8f8f8 !important;
  padding: 0;
}
.el-table >>> th.is-leaf,
.el-table >>> td {
  border-bottom: 0;
  padding: 10px 0;
}
.el-table >>> th.is-leaf {
  padding: 4px 0;
}
.el-table--scrollable-x .el-table__body-wrapper {
}
.el-table::before {
  height: 0;
}

/* 中间订单详情 */
.lineItem {
  margin-bottom: 60px;
}
.lineItem h2 {
  font-size: 20px;
}
.lineItem h2::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem > span {
  display: block;
  font-size: 15px;
  color: #aaa;
}
.lineItem span::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .accessory {
  margin-top: 15px;
}
.lineItem .accessory p {
  display: block;
  font-size: 14px;
  color: #666;
  margin: 15px 0;
}
.lineItem .accessory p::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .lItemContent {
  font-size: 14px;
  margin-top: 10px;
  line-height: 26px;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 10px;
}
.lineItem .lItemContent::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .lItemContent > .lICon-reply {
  padding-left: 1em;
  font-size: 14px;
  color: #888;
  margin-top: 10px;
}
.lineItem .lItemContent > .lICon-reply > span {
  font-size: 14px;
  display: inline-block;
}
.lineItem .el-input {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
.lineItem .el-input >>> input {
  border: 0;
  height: 46px;
  line-height: 46px;
}

.replyCount {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.replyCount i {
  display: block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 13px;
  border-radius: 4px;
  background-color: #f56c6c;
  color: #fff;
  font-style: normal;
}

/* 右侧 正式回复 */
.el-form {
  margin-bottom: 80px;
}
.expWidth {
  position: absolute;
  left: 0;
  top: 48%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.el-col {
  transition: all 0.3s;
}
::v-deep .el-drawer__header {
  border-bottom: 0;
}
.el-card >>> .ql-toolbar.ql-snow {
  border: 1px solid #e6ebf5;
}
.el-card >>> .ql-container.ql-snow {
  border: 1px solid #e6ebf5;
  border-top: 0;
}
.byTwoThirds {
  position: absolute;
  right: 0;
  width: 67%;
  height: 100%;
}
.formalReply {
  height: 70%;
}
.formalReply .el-select {
  width: 100%;
  margin-bottom: 20px;
}
.formalReply >>> .w-e-text {
  padding: 0 1em;
}
.formalReply >>> .placeholder {
  margin-left: 0.5em;
}
.queryBtn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e6ebf5;
  z-index: 99999;
}
.queryBtn .el-button {
  width: 49.9%;
  margin: 0;
  border-radius: 0;
}
.queryBtn .el-button--medium {
  padding: 15px 20px;
}

.drawerMain {
  height: 100%;
  padding: 0 30px 30px 30px;
}
.drawerMain .el-col {
  height: 100%;
}
.drawerMain .dracon {
  height: 100%;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #ffffff;
  padding: 20px;
}
.drawerMain .dracon .draconTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .drawerMain .dracon textarea {
  height: 56px;
  border-radius: 12px;
  font-family: Microsoft Yahei;
}

.drawerMain .dracon ul {
  padding-left: 0;
}
.drawerMain .dracon li {
  width: 100%;
  cursor: pointer;
  list-style: none;
  padding: 5px;
  margin: 2px 0;
  font-size: 14px;
  line-height: 24px;
  transition: all 0.3s;
}
.drawerMain .dracon li.cur,
.drawerMain .dracon li:hover {
  background-color: #d7ebfd;
}
.drawerMain .dracon i {
  font-style: normal;
}
.drawerMain .dracon .qlyl {
  color: #1890ff;
}
.drawerMain .dracon .qlyh {
  color: #f56c6c;
}
.queryLibDetail h3 {
  margin-top: 8px;
}
.queryLibDetail p {
  font-size: 16px;
  line-height: 26px;
}

/* 查智库 */
.dracon_search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 16px;
}
.dracon_search .el-button {
  height: 36px;
  padding: 0 18px !important;
}
.content_search {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.content_search > h4 {
  width: 100%;
  font-size: 12px;
  color: #666;
}
.content_search .el-tag {
  width: 22%;
  text-align: center;
  height: 36px;
  line-height: 36px;
  margin-bottom: 16px;
  border-radius: 20px;
  font-size: 12px;
  border: 0;
  background-color: #f4f5f8;
  color: #666;
  cursor: pointer;
}
.content_search .el-tag:hover {
  background-color: #eceef3;
}

.otherBtn {
  position: absolute;
  right: 20px;
  top: 10px;
}
.otherBtn >>> .el-drawer__wrapper {
  z-index: 99999 !important;
}
.otherBtn .el-button {
  padding: 8px 10px;
  font-size: 13px;
  margin-left: 3px;
}

/* 日历 样式 */
.index-calendar {
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  padding: 0 20px;
}
.rlExplain {
  font-size: 12px;
  margin-top: 15px;
}
.rlExplain p {
  display: flex;
  align-items: center;
  margin: 0;
}
.rlExplain i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f2f2f2;
  margin-left: 5px;
  margin-right: 3px;
}
.rlExplain i.blueCircle {
  background-color: #409eff;
}
.rlExplain i.redCircle {
  background-color: #f56c6c;
}
.index-calendar >>> .el-calendar__header {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px 0 0;
  border-bottom: 0;
}
.index-calendar >>> .el-button--mini {
  padding: 7px;
}
.index-calendar >>> .el-calendar__body {
  padding: 12px 0px;
}
.index-calendar >>> .el-calendar__header > .el-calendar__title {
  width: 35%;
}
.index-calendar >>> .el-calendar__header > .el-calendar__button-group {
  width: 55%;
}
.index-calendar >>> .el-calendar__header .el-calendar__button-group {
  display: flex;
  justify-content: flex-end;
}

.index-calendar >>> .el-calendar-table tr td:first-child,
.index-calendar >>> .el-calendar-table td {
  border: 0;
}

.index-calendar >>> .el-calendar-table td.is-selected {
  background-color: #fff;
}

.index-calendar >>> .el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  padding: 0;
  position: relative;
}

.index-calendar >>> .el-calendar-table .el-calendar-day:hover {
  background-color: #fff;
}
.backlog {
  position: absolute;
  top: 4.75%;
  left: 80px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p {
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p:hover {
  background-color: #f2f8fe;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-week {
  background-color: #f2f2f2;
}

.index-calendar >>> .el-calendar-table td.is-today .el-calendar-day p {
  border: 1px solid #409eff;
}

.index-calendar >>> .el-calendar-table td.is-selected .el-calendar-day p {
  color: #fff;
  background-color: #409eff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-holiday {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
/* 日历 end*/

/* 统计 */
.drawerState {
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  padding: 20px;
}
/* 统计 end*/
</style>